<template>
  <div class="bottom_bar" @click.capture="choose($event)">
    <div
      class="bottom_all"
      v-for="(v,i) in bottom"
      :key="i"
      :class="defualt==v.title?'choosed':''"
      :text.prop="v"
      @click.stop
    >
      <router-link class="buttom_icon" :to="`${ v.to }`" tag="div">
        <p :class="`icon iconfont ${ v.icon }`"></p>
        <p class="buttom_title" 
        >{{ v.title }}</p>
      </router-link>
    </div>
    <!-- <div class='bottom_all'>
            <router-link class='buttom_icon' :to="`/type`" tag='div' >
                <p class='icon iconfont icon-type'></p>
                <p class='buttom_title'>分类</p>
            </router-link>
        </div>
        <div class='bottom_all'>
            <router-link class='buttom_icon' :to="`/cart`" tag='div'>
                <p class='icon iconfont icon-cart'></p>
                <p class='buttom_title'>购物车</p>
            </router-link>
        </div>
        <div class='bottom_all'>
           <router-link class='buttom_icon' :to="`/about`" tag='div'>
                <p class='icon iconfont icon-about'></p>
                <p class='buttom_title'>关于我</p>
            </router-link>
    </div>-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      bottom: [
        {
          to: "/home",
          icon: "icon-home",
          title: "首页"
        },
        {
          to: "/type",
          icon: "icon-type",
          title: "分类"
        },
        {
          to: "/cart",
          icon: "icon-cart",
          title: "购物车"
        },
        {
          to: "/about",
          icon: "icon-about",
          title: "关于我"
        }
      ],
      defualt: "首页"
    };
  },
  methods: {
    choose(e) {
      // console.log(e.target.parentNode.innerText);
      this.defualt = e.target.parentNode.innerText;
    }
  }
};
</script>
<style lang="less" scoped>
.bottom_bar {
  position: fixed;
  // margin-top:100px;
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0px;
  z-index: 99;
  background-color: #ffffff;
  border-top: 1px solid #dedede;
  text-align: center;
  color: #000;

  .bottom_all {
    width: 25%;
    height: 100%;
    // border:1px solid red;
    box-sizing: border-box;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont {
      font-size: 50px;
      margin-bottom: 0px;
    }
    .buttom_title {
      font-size: 14px;
      margin-bottom: 0px;
    }
  }
}
// .bottom_all:hover {
//     color: #f34b70;
// }
.choosed {
  color: #f34b70;
}
</style>